<!--门禁组管理-->
<template>
<div class="avue-crud">
  <basic-container>
    <p class="contain-title">门禁组管理</p>
    <div class="door-search">
      <p>搜索门禁组</p>
      <el-input v-model="input" class="search-style" placeholder="请输入门禁组名称"></el-input>
      <el-button icon="el-icon-search" type="primary" @click="searchDoor()">搜索</el-button>
      <el-button icon="el-icon-delete" @click="resetForm()">重置</el-button>
      <el-button icon="el-icon-plus" type="primary" @click="addDoorGroup()">新增</el-button>
      <!--      <el-button type="danger">批量删除</el-button>-->
    </div>
    <br>
<!--    门禁组列表-->
    <el-form>
      <el-form-item>
        <el-table
            :data="doorData"
            ref="multipleTable"
            tooltip-effect="dark"
            border
            stripe
            style="width: 100%"
            v-loading="loading"
            :cell-style="tableCellStyle"
            :header-cell-style='tableHeaderColor'
            @selection-change="handleSelectionChange">
<!--          <el-table-column label="全选"-->
<!--                           type="selection"-->
<!--                           width="55">-->
<!--          </el-table-column>-->
<!--          <el-table-column prop="id" label="组id" width="150"></el-table-column>-->
          <el-table-column
              label="序号"
              type="index"
              align="center"
              width="55"
              :index="pageSize * currentPage - pageSize + 1">
          </el-table-column>
          <el-table-column label="组名称" prop="groupName" height="32px"></el-table-column>
<!--          <el-table-column prop="deviceCount" label="设备数" height="32px">-->
<!--            <template slot-scope="scope">-->
<!--              {{ scope.row.deviceCount === null ? '0' : scope.row.deviceCount }}-->
<!--            </template>-->
<!--          </el-table-column>-->


          <el-table-column prop="inWhetherSend" label="进向推送" height="32px">
            <template slot-scope="scope">
              <p v-if="scope.row.inWhetherSend == '1'">是</p>
              <p v-if="scope.row.inWhetherSend == '0'">否</p>
              <p v-if="scope.row.inWhetherSend == null">未设置</p>
            </template>
          </el-table-column>

          <el-table-column prop="outWhetherSend" label="出向推送" height="32px">
            <template slot-scope="scope">
              <p v-if="scope.row.outWhetherSend == '1'">是</p>
              <p v-if="scope.row.outWhetherSend == '0'">否</p>
              <p v-if="scope.row.outWhetherSend == null">未设置</p>
            </template>
          </el-table-column>

          <el-table-column prop="updateTime" label="修改时间" height="32px">
            <template slot-scope="scope">
              {{ scope.row.updateTime === null ? '暂无数据' : scope.row.updateTime }}
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间" height="32px">
            <template slot-scope="scope">
              {{ scope.row.createTime === null ? '暂无数据' : scope.row.createTime }}
            </template>
          </el-table-column>
          <el-table-column prop="opera" label="操作" width="180px" height="32px">
            <template slot-scope="scope">
              <el-button
                  size="mini"
                  icon="el-icon-edit"
                  type="primary"
                  @click="handleEdit(scope.row)">编辑
              </el-button>
              <el-button
                  size="mini"
                  icon="el-icon-delete"
                  type="danger"
                  @click="handleDelete(scope.row)">删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
    </el-form>
    <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10,20,30,40,50,100]"
        :page-size="pageSize"
        :data="doorData"
        style="text-align: right"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>
  </basic-container>

  <!--  新增组别弹窗-->
  <el-dialog
      :visible.sync="dialogAddVisible"
      ref="dialogForm"
      center title="新增门禁组" width="35%" @close="dictItemVisible">
    <el-form :rules="rules">
      <el-form-item class="door-search" label="门禁组名称" prop="groupName">
        <el-input v-model="groupName" class="search-style" placeholder="请输入名称" style="width: 50%"></el-input>
      </el-form-item>


      <el-form-item label="进向推送" prop="inWhetherSend">
        <el-switch
            v-model="inWhetherSend"
            :active-value="1"
            :inactive-value="0"
            style="margin-right: 20px">
        </el-switch>
      </el-form-item>

      <el-form-item label="出向推送" prop="outWhetherSend">
        <el-switch
            v-model="outWhetherSend"
            :active-value="1"
            :inactive-value="0"
            style="margin-right: 20px">
        </el-switch>
      </el-form-item>

    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="saveAddVisible()">保存</el-button>
    </div>
  </el-dialog>

<!--  编辑门禁组弹窗-->
  <el-dialog
      :visible.sync="dialogEditVisible"
      title="门禁组编辑"
      width="60%"
      @close="dictItemVisible" center>
    <!--    <p class="contain-title">门禁组编辑</p>-->
    <div class="door-search">
      <p>门禁组名称</p>
      <el-input v-model="groupName" class="search-style" placeholder="正门" style="width: 30%"></el-input>
      <p style="margin-right: 10px">进向推送</p>
          <el-switch
              v-model="inWhetherSend"
              :active-value="1"
              :inactive-value="0"
              style="margin-right: 60px">
          </el-switch>
      <p style="margin-right: 10px">出向推送</p>
          <el-switch
              v-model="outWhetherSend"
              :active-value="1"
              :inactive-value="0">
          </el-switch>
    </div>
    <div class="door-search">
      <p>设备数</p>
      <el-button type="success" @click="addequipVisible()">绑定新设备</el-button>
    </div>
    <!--    子设备列表-->
    <p class="contain-title">设备列表</p>
    <el-form>
      <el-form-item>
        <el-table :data="equipData" ref="multipleTable">
<!--          <el-table-column label="设备编号" prop="id">-->
<!--            <template slot-scope="scope">-->
<!--              {{ scope.row.id === '' || scope.row.id === null ? '暂无数据' : scope.row.id }}-->
<!--            </template>-->
<!--          </el-table-column>-->
          <el-table-column
              label="序号"
              type="index"
              align="center"
              width="55"
              :index="pageSize1 * currentPage1 - pageSize1 + 1">
          </el-table-column>
          <el-table-column label="设备名" prop="deviceName">
            <template slot-scope="scope">
              {{ scope.row.deviceName === '' || scope.row.deviceName === null ? '暂无数据' : scope.row.deviceName }}
            </template>
          </el-table-column>
          <el-table-column label="设备mac" prop="macAddress">
            <template slot-scope="scope">
              {{ scope.row.macAddress === '' || scope.row.macAddress === null ? '暂无数据' : scope.row.macAddress }}
            </template>
          </el-table-column>
          <el-table-column label="设备版本" prop="deviceAppVersion">
            <template slot-scope="scope">
              {{ scope.row.deviceAppVersion === null ? '暂无数据' : scope.row.deviceAppVersion }}
            </template>
          </el-table-column>
          <el-table-column prop="direction" label="进出向">
            <template slot-scope="scope">
              <p v-if="scope.row.direction === 0">进</p>
              <p v-if="scope.row.direction === 1">出</p>
            </template>
          </el-table-column>
<!--          <el-table-column label="设备编号" prop="deviceId">-->
<!--            <template slot-scope="scope">-->
<!--              {{ scope.row.deviceId === '' || null ? '暂无数据' : scope.row.deviceId }}-->
<!--            </template>-->
<!--          </el-table-column>-->
          <el-table-column prop="deviceStatus" label="当前状态">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.deviceStatus === 0" size="medium" type="primary">正常</el-tag>
              <el-tag v-if="scope.row.deviceStatus === 1" size="medium" type="danger">锁定</el-tag>
            </template>
          </el-table-column>
<!--          <el-table-column label="绑定时间" prop="updateTime"></el-table-column>-->
          <el-table-column prop="opera" label="操作">
            <template slot-scope="scope">
              <el-button
                  size="mini"
                  type="danger"
                  @click="handleEditDelete(scope.row)">解绑
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
    </el-form>
    <el-pagination
        background
        @size-change="editdoorSizeChange"
        @current-change="editdoorCurrentChange"
        :current-page="currentPage1"
        :page-sizes="[5,10,20,30,40,50,100]"
        :page-size="pageSize1"
        style="text-align: right"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total1">
    </el-pagination>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dictItemVisible()">取消</el-button>
      <el-button type="primary" @click="saveEditVisible()">确定</el-button>
    </div>
  </el-dialog>

<!--  绑定新设备弹窗-->
  <el-dialog
      :visible.sync="addItemVisible"
      title=""
      width="60%"
      @close="addDictItemVisible" center>
    <p class="contain-title">新增设备</p>
    <div class="door-search">
      <p>搜索设备已添加</p>
      <el-input v-model="input1" placeholder="填写设备mac以搜索" class="search-style" prop="input1" clearable @clear="delValue"></el-input>
      <el-button type="success" @click="addequipSearch()">搜索</el-button>
      <el-button  @click="delValue">重置</el-button>
    </div>
    <!--    子设备列表-->
    <p class="contain-title">设备列表</p>
    <el-form>
      <el-form-item>
        <el-table :data="newEquipData" ref="multipleTable">
<!--          <el-table-column label="设备编号" prop="id">-->
<!--            <template slot-scope="scope">-->
<!--              {{ scope.row.id === '' || scope.row.id === null ? '暂无数据' : scope.row.id }}-->
<!--            </template>-->
<!--          </el-table-column>-->
          <el-table-column
              label="序号"
              type="index"
              align="center"
              width="55"
              :index="pageSize2 * currentPage2 - pageSize2 + 1">
          </el-table-column>
          <el-table-column label="设备名" prop="deviceName">
            <template slot-scope="scope">
              {{ scope.row.deviceName === ''||scope.row.deviceName === null ? '暂无数据' : scope.row.deviceName }}
            </template>
          </el-table-column>
          <el-table-column label="设备mac" prop="macAddress">
            <template slot-scope="scope">
              {{ scope.row.macAddress === '' ? '暂无数据' : scope.row.macAddress }}
            </template>
          </el-table-column>
          <el-table-column label="设备版本" prop="deviceAppVersion">
            <template slot-scope="scope">
              {{ scope.row.deviceAppVersion === null ? '暂无数据' : scope.row.deviceAppVersion }}
            </template>
          </el-table-column>
          <el-table-column prop="direction" label="进出向">
            <template slot-scope="scope">
              <p v-if="scope.row.direction=== 0">进</p>
              <p v-if="scope.row.direction=== 1">出</p>
              <p v-if="scope.row.direction === null || scope.row.direction === ''">暂无数据</p>
            </template>
          </el-table-column>
<!--          <el-table-column label="设备编号" prop="deviceId">-->
<!--            <template slot-scope="scope">-->
<!--              {{ scope.row.deviceId === '' || null ? '暂无数据' : scope.row.deviceId }}-->
<!--            </template>-->
<!--          </el-table-column>-->
          <el-table-column prop="deviceStatus" label="当前状态">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.deviceStatus === 0" size="medium" type="primary">正常</el-tag>
              <el-tag v-if="scope.row.deviceStatus === 1" size="medium" type="danger">锁定</el-tag>
            </template>
          </el-table-column>
<!--          <el-table-column label="绑定时间" prop="updateTime"></el-table-column>-->
          <el-table-column prop="opera" label="操作">
            <template slot-scope="scope">
<!--              <el-button size="mini" type="primary" @click="handleAdd(scope.row)">绑定</el-button>-->
              <el-button v-if="scope.row.flag === true" size="mini" type="primary" @click="handleAdd(scope.row)">绑定</el-button>
              <el-button v-else-if="scope.row.flag === false" size="mini" type="primary" disabled>已绑定</el-button>

            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
    </el-form>
    <el-pagination
        background
        @size-change="addequipSizeChange"
        @current-change="addequipCurrentChange"
        :data="equipData"
        :current-page="currentPage2"
        :page-sizes="[5,10,20,30,40,50,100]"
        :page-size="pageSize2"
        style="text-align: right"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total2">
    </el-pagination>
    <div slot="footer" class="dialog-footer">
      <el-button plain @click="cancel">取 消</el-button>
      <el-button type="primary" @click="addItemVisible = false">确 定</el-button>
    </div>
  </el-dialog>
</div>
</template>

<script>
import {addDoor, clearEquipDoor, delDoor, doorList, editDoor, editEquipDoor, equipListDoor} from '@/api/door/access'
import {equipList} from '@/api/door/equip'

export default {
  name: "doorgroup",
  data() {
    return {
      loading:true,
      currentPage:1, // 当前页数
      pageSize:10,  //每页多少条
      total: 0, // 总页数
      //编辑弹窗
      currentPage1:1,
      pageSize1:5,
      total1: 0,
      //绑定新设备
      currentPage2:1,
      pageSize2:5,
      total2: 0,

      show:'',
      flag:true,//单位切换开关
      // btnText:'绑定',
      // disabled:false,

      inWhetherSend:'1' || '0',  //进向推送
      outWhetherSend:'1' || '0',  //出向推送
      input: '',
      input1: '',
      groupName: '',             //组名称
      deviceCount: '',           //子设备数
      // whetherSend: '1' || '0',           //进出向推送
      list: [],
      doorData: [],              //门禁组数据
      equipData: [],             //子设备数据
      newEquipData: [],          //新设备数据
      dialogEditVisible: false,  //编辑门禁组弹窗
      addItemVisible: false,
      dialogAddVisible: false,
      // 表单校验
      rules: {
        groupName: [
          {required: true, trigger: "none", message: "门禁组名称不能为空",}
        ],
        inWhetherSend: [
          {required: true, trigger: "none"}
        ],
        outWhetherSend: [
          {required: true, trigger: "none"}
        ],
      },
      tableCellStyle: {
        'text-align': 'center',
        'padding':'0',
      },
      tableHeaderColor: {
        'text-align': 'center',
      },
    }
  },
  mounted() {
    this.showdoorlist()
  },
  methods: {
    //展示门禁组列表
    showdoorlist(){
      this.loading = true
      let param = {
        'id':'',
        'size':this.pageSize,
        'current':this.currentPage,
        descs: 'create_time',  //是否倒序
      }
      doorList(param).then(res => {
        if (res.data.code === 0){
          this.total=res.data.data.total;
          this.doorData=res.data.data.records;
          this.loading = false
        }
      });
    },

    //搜索门禁组
    searchDoor() {
      // debugger
      if (this.input === "") {
        this.$message.error('请输入门禁组名称')
      } else {
        let param = {
          "groupName": this.input,
        }
        doorList(param).then(res => {
          if (res.data.code === 0) {
            this.doorData = res.data.data.records;
          }
        });
      }
    },
    // 重置
    resetForm: function () {
      this.input = "";
      this.showdoorlist();
    },

    //新增门禁组
    addDoorGroup() {
      this.dialogAddVisible = true;
    },
    saveAddVisible() {
      let param={
        groupName:this.groupName,
        inWhetherSend:this.inWhetherSend,
        outWhetherSend:this.outWhetherSend,
      }
      addDoor(param).then(res =>{
          if(res.data.code === 0){
            this.doorData= res.data.data.records
            this.dialogAddVisible=false;
            this.$message.success('添加成功')
            this.showdoorlist(this.page)
          }
          }
      )
    },
    //删除门禁组
    handleDelete:function (row) {
      // debugger
      this.$confirm('确定删除组别' + row.groupName + '，删除后相关通行权限将会失效,请谨慎操作', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function () {
        return delDoor(row.id)
      }).then(() => {
        this.showdoorlist(this.page)
        this.$message.success('删除成功')
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 绑定门禁组id为查询设备的入参
    showdoorlistin(){
      let param={
        'accessControlGroupId':this.gid,
        'size':this.pageSize1,
        'current':this.currentPage1,
      }
      equipListDoor(param).then(res => {
        if (res.data.code == 0){
          this.total1 = res.data.data.total;
          this.equipData = res.data.data.records;
        }
      });
    },
    //编辑门禁组的弹窗  展示门禁组信息和子设备列表信息
    handleEdit(row) {
      this.dialogEditVisible = true;
      this.connectrow = row
      this.gid = row.id
      let param ={
        'accessControlGroupId' : this.gid,
        'size':this.pageSize1,
        'current':this.currentPage1,
      }
      equipListDoor(param).then(res => {
        if (res.data.code === 0){
          this.groupName = row.groupName
          this.inWhetherSend = row.inWhetherSend
          this.outWhetherSend = row.outWhetherSend
          this.total1 = res.data.data.total;
          this.equipData = res.data.data.records;
        }
      });
    },

    //保存编辑信息
    saveEditVisible(){
      // debugger
      let param={
        id:this.gid,
        groupName:this.groupName,
        inWhetherSend:this.inWhetherSend,
        outWhetherSend:this.outWhetherSend,
      }
      editDoor(param).then(res => {
        if (res.data.code === 0) {
          this.doorData = res.data.data.records;
          this.showdoorlist(this.page)
          this.$message.success('修改成功')
          this.dialogEditVisible = false;
        }
      })
    },

    //解绑子设备
    handleEditDelete(row) {
      // debugger
      let param = {
        'groupId':this.gid,
        'deviceId':row.id,
      }
      this.$confirm('确定解绑子设备' + row.deviceName +'？', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning'
      }).then(function (){
        return clearEquipDoor(param).then(res => {
          if (res.data.code === 0) {
            let list = param;
            let editList = []
            editList.push(list)
          }
        })
      }).then(() => {
        this.showdoorlistin(this.page)
        this.$message.success('解绑成功')
      })

    },

    dictItemVisible: function () {
      this.dialogAddVisible = false
      this.dialogEditVisible = false
      this.groupName = null;
      this.currentPage1 = 1

    },
    addDictItemVisible: function () {
      this.addItemVisible = false
      this.currentPage2 = 1
      this.showdoorlistin(this.page)
    },

    //点击门禁组编辑的新增设备按钮，绑定新设备，展示设备列表
    addequipVisible() {
      this.addItemVisible = true
      let param = {
        'id': this.id,
        'size': this.pageSize2,
        'current': this.currentPage2,
        'deviceGroupId': this.gid,
        "macAddress": this.input1,
      }
      equipList(param).then(res => {
        if (res.data.code === 0){
          this.newEquipData=res.data.data.records;
          this.total2=res.data.data.total
          this.newEquipData.map(item => {
            this.$set(item,'flag')
            item.flag = true
          })
        }
      });
    },
    //点击新增设备的绑定按钮,调用设备编辑接口，传入设备id和门禁组的id
    handleAdd(row) {
      let param=[{
        "deviceId": row.id,
        "groupId": this.connectrow.id,
      }]
      let that = this
      console.log(param.id)
      editEquipDoor(param).then(res => {
        if (res.data.code === 0) {
          this.equipData = res.data.data.records;
          // this.showPersonList(this.page)
          this.$message.success('添加成功')
            if(row.flag === true){
            return row.flag = false
            }
        }
      })
    },

    //绑定新设备弹窗的搜索设备
    addequipSearch(){
      if (this.input1 === '') {
        this.$message.error("请输入查询内容")}
      else {
        // let param = {
        //   "macAddress":this.input1,
        // }
        this.macAddress = this.input1
        this.currentPage2 = 1
        this.addequipVisible()
        // equipList(param).then(res => {
        //   if (res.data.code === 0) {
        //     this.newEquipData=res.data.data.records;
        //     this.total2=res.data.data.total
        //   }
        // });
      }
    },

    // 点击清空按钮时触发
    delValue() {
      this.input1 = "";
      this.addequipVisible(this.page)
    },
    cancel(){
      this.input1 = "";
      this.addItemVisible = false
    },

    //展示列表分页
    handleSizeChange(size) {
      this.pageSize = size;
      this.showdoorlist();
    },
    handleCurrentChange(current) {
      this.currentPage = current;
      this.showdoorlist();
    },


    //编辑门禁的子设备分页
    editdoorSizeChange(size) {
      this.pageSize1 = size;
      this.showdoorlistin()
    },
    editdoorCurrentChange(current){
      this.currentPage1 = current;
      this.showdoorlistin()
    },


    //绑定设备弹窗的设备分页 再次调用查询设备接口
    addequipCurrentChange(current){
      this.currentPage2 = current;
      this.addequipVisible()
    },
    addequipSizeChange(size){
      this.pageSize2 = size;
      this.addequipVisible()

    },
  },
}
</script>

<style scoped>
.contain-title{
  font-weight: bold;
  margin-left: 4px;
}
.door-search p {
  font-size: 14px;
  display: inline-block;
  margin-right: 20px;
  margin-left: 4px;
}
.search-style{
  width: 15%;
  margin-right: 20px;
}
.door-del p {
  text-align: center;
}
.dialog-footer {

}
/deep/.el-table--small td, .el-table--small th{
  padding: 1px 0;
}
</style>